<template>
  <container>
    <div class="detail">
      <div class="header"><Order fill="#b37feb" /> 订单详情</div>
      <div class="flex flex_wrap mt-20">
        <div class="flexitem">订单号：10000000123456789</div>
        <div class="flexitem">订单状态：<el-tag type="success">已收货</el-tag></div>
        <div class="flexitem">创建时间：2024-09-23 10:32:23</div>
        <div class="flexitem">收货时间：2024-09-23 10:32:23</div>
        <div class="flexitem">订单总价：{{ priceAll }}</div>
      </div>
      <el-divider border-style="dashed" />
      <div class="header"><User fill="#69c0ff" /> 用户信息</div>
      <div class="flex flex_wrap mt-20">
        <div class="flexitem">用户昵称：吴彦祖安徽分祖</div>
        <div class="flexitem">联系电话：13800000000</div>
        <div class="flexitem">收货地址：安徽省合肥市经开区吴彦祖大厦1001</div>
        <div class="flexitem">备注：吴彦祖的快递，请优先配送😊</div>
      </div>
      <el-divider line-style="dashed" />
      <div class="header"><Commodity fill="#ff9c6e" /> 订单商品</div>
      <div class="mt-20">
        <el-table border :data="tableData" show-summary :summary-method="summaryMethod">
          <el-table-column label="商品编号" prop="number" width="150" />
          <el-table-column label="商品名称" prop="name" />
          <el-table-column label="商品单价（¥）" prop="price" width="150" align="center" />
          <el-table-column label="购买数量" prop="count" width="150" align="center" />
          <el-table-column label="价格（¥）" width="150" align="center" prop="all">
            <template #default="{ row }">
              {{ row.price * row.count }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-divider line-style="dashed" />
      <div class="header"><Truck fill="#ff85c0" /> 物流记录</div>
      <div class="mt-20 logistics">
        <div class="logistics__name mt-20 mb-20">
          <el-avatar :size="24" class="mr-10" color="#e94242">物</el-avatar>
          XXX快递 {{ logistics.logistics_order }}
        </div>
        <el-timeline>
          <el-timeline-item :timestamp="item.timestamp" v-for="item in logistics.status_updates.toReversed()">
            <div class="title">{{ item.status }}</div>
            <div class="desc">{{ item.description }}</div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </container>
</template>

<script setup lang="ts">
import container from '@/components/container';
import { Commodity, Order, Check, Truck, User } from '@icon-park/vue-next';
import { computed } from 'vue';

const tableData = [
  {
    number: '123456789',
    name: '商品1',
    price: 13.25,
    count: 5
  },
  {
    number: '123456789',
    name: '商品3',
    price: 18.25,
    count: 1
  },
  {
    number: '123456789',
    name: '商品7',
    price: 23.5,
    count: 2
  },
  {
    number: '123456789',
    name: '商品2',
    price: 3,
    count: 25
  }
];

const priceAll = computed(() => {
  return tableData.reduce((sum, acc) => {
    return (sum += acc.count * acc.price);
  }, 0);
});

const summaryMethod = ({ columns, data }) => {
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '总计';
      return;
    }
    if (column.property === 'all') {
      sums[index] = priceAll.value;
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!Number.isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0);
    } else {
      sums[index] = 'N/A';
    }
  });
  return sums;
};

const logistics = {
  order_id: '10000000123456789',
  logistics_order: 'ORD123456',
  status_updates: [
    {
      status: '订单已创建',
      description: '客户成功下单，订单信息已录入系统，待处理。',
      timestamp: '2024-09-20T09:00:00Z',
      location: '系统后台'
    },
    {
      status: '订单处理中',
      description: '订单正在进行准备工作，包括商品拣选和包装。',
      timestamp: '2024-09-20T10:00:00Z',
      location: '仓库'
    },
    {
      status: '订单已发货',
      description: '订单已交由物流公司，快递单号已生成并分配。',
      timestamp: '2024-09-21T08:00:00Z',
      location: '物流中心'
    },
    {
      status: '运输中',
      description: '包裹在途，正在由快递员运输至目的地。',
      timestamp: '2024-09-21T12:00:00Z',
      location: '运输途中'
    },
    {
      status: '派送中',
      description: '快递员已到达客户所在区域，正在进行派送。',
      timestamp: '2024-09-22T09:30:00Z',
      location: '派送地址'
    },
    {
      status: '已送达',
      description: '包裹已成功送达客户手中，订单完成。',
      timestamp: '2024-09-22T11:00:00Z',
      location: '客户地址'
    }
  ]
};
</script>

<style scoped lang="scss">
.detail {
  font-size: 14px;
  color: #999;

  .header {
    padding-top: 20px;
    font-size: 18px;
    font-weight: 900;
    color: var(--el-text-color-primary);
  }
}
.flexitem {
  flex-grow: 0;
  width: 33.33%;
  line-height: 32px;
  margin-bottom: 20px;
}

.logistics {
  color: var(--el-text-color-primary);
  .logistics__name {
    font-size: 16px;
    font-weight: 900;
    line-height: 20px;
    display: flex;
    align-items: center;
  }

  .title {
    font-weight: 700;
  }
  .desc {
    color: #999;
    font-size: 14px;
  }
}
</style>
